<!DOCTYPE html>
<html lang="en">
<head>
    <title>ORDER主页</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <style type="text/css">
        #manage,#add{
            float: left;
        }
    </style>
</head>
<body>
<hr>

<div id="orderapp" class="container">
    <h2 id="manage">订单管理</h2>
    <div id="add" style="padding-left: 50px;padding-top: 20px">
        <button class="btn btn-default" type="button" @click="addModal()">新增</button>
    </div>
    <br>
    <table class="table">
        <tr class="row">
           <!-- <th>ID</th>
            <th>CID</th>
            <th>UID</th>
            <th>GETID</th>
            <th>BACKID</th>
            <th>OPRICE</th>
            <th>STATUS</th>
            <th>ACTION</th>-->

            <th>订单号</th>
            <th>用户编号</th>
            <th>订单金额</th>
            <th>车型</th>
            <th>取车地址</th>
            <th>还车地址</th>
            <th>订单状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="order in orders" class="row">
            <!--<th>{{order.id}}</th>
            <th>{{order.cid}}</th>
            <th>{{order.uid}}</th>
            <th>{{order.getid}}</th>
            <th>{{order.backid}}</th>
            <th>{{order.oprice}}</th>
            <th>{{order.status}}</th>-->

            <td>{{order.id}}</td>
            <td>{{order.uid}}</td>
            <td>{{order.oprice}}</td>
            <td>{{order.cname}}</td>
            <td style="font-size: 15px">{{order.getcity}}</td>
            <td style="font-size: 15px">{{order.backcity}}</td>
            <td>{{order.status}}</td>
            <th>
                <button class="btn btn-default" type="button" @click="updateModal(order.id)">修改</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-default" type="button" @click="deleteOrder(order.id)">删除</button>
            </th>
        </tr>
    </table>

    <div style="text-align: center">
        <ul class="pagination">
            <li class="page-item ">
                <span style="cursor: pointer" class="page-link" v-on:click.prevent="changePage(0)">上页</span>
            </li>
            <li class="page-item ">
                <span  class="page-link" >第{{page}}页</span>
            </li>
            <li class="page-item ">
                <span style="cursor: pointer" class="page-link" v-on:click.prevent="changePage(-1)">下页</span>
            </li>
        </ul>
    </div>

    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addModallable">ADDORDER</h4>
                </div>
                <form >
                    <div class="modal-body">
                        <input type="hidden" name="id" v-model="aorder.id">
                        <div class="form-group">
                            <label class="control-label">CID:</label>
                            <input type="text" class="form-control" name="cid" v-model="aorder.cid">
                        </div>
                        <div class="form-group">
                            <label class="control-label">UID:</label>
                            <input type="text" class="form-control" name="uid" v-model="aorder.uid">
                        </div>
                        <div class="form-group">
                            <label class="control-label">GETID:</label>
                            <input type="text" class="form-control" name="getid" v-model="aorder.getid">
                        </div>
                        <div class="form-group">
                            <label class="control-label">BACKID:</label>
                            <input type="text" class="form-control" name="backid" v-model="aorder.backid">
                        </div>
                        <div class="form-group">
                            <label class="control-label">OPRICE:</label>
                            <input type="text" class="form-control" name="oprice" v-model="aorder.oprice">
                        </div>
                        <div class="form-group">
                            <label class="control-label">STATUS:</label>
                            <input type="text" class="form-control" name="status" v-model="aorder.status">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" @click="addOrder()" class="btn btn-primary" value="提交"></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">UPDATEORDER </h4>
                </div>
                <form @submit.prevent="updateOrder()">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label">ID:</label>
                            <input type="text" class="form-control" readonly="readonly" name="id" v-model="uporder.id">
                        </div>
                        <div class="form-group">
                            <label class="control-label">CID:</label>
                            <input type="text" class="form-control" name="cid" v-model="uporder.cid">
                        </div>
                        <div class="form-group">
                            <label class="control-label">UID:</label>
                            <input type="text" class="form-control" name="uid" v-model="uporder.uid">
                        </div>
                        <div class="form-group">
                            <label class="control-label">GETID:</label>
                            <input type="text" class="form-control" name="getid" v-model="uporder.getid">
                        </div>
                        <div class="form-group">
                            <label class="control-label">BACKID:</label>
                            <input type="text" class="form-control" name="backid" v-model="uporder.backid">
                        </div>
                        <div class="form-group">
                            <label class="control-label">OPRICE:</label>
                            <input type="text" class="form-control" name="oprice" v-model="uporder.oprice">
                        </div>
                        <div class="form-group">
                            <label class="control-label">STATUS:</label>
                            <input type="text" class="form-control" name="status" v-model="uporder.status">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary" value="提交"></input>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
<script>
    var div1 = new Vue({
            el: '#orderapp',
            data: {
                page: 1,
                pages: 0,
                orders: [],
                aorder: {id: 0, cid:0, uid:0,getid:0,backid:0,oprice:0.0,status:''},
                uporder: {id: 0, cid:0, uid:0,getid:0,backid:0,oprice:0.0,status:''}
            },
            methods: {
                addModal: function () {
                    $("#addModal").modal('show');
                },
                updateModal: function (id) {
                    for (let x of div1.orders) {
                        if (x.id == id) {
                            div1.uporder.id = x.id;
                            div1.uporder.cid = x.cid;
                            div1.uporder.uid = x.uid;
                            div1.uporder.getid = x.getid;
                            div1.uporder.backid = x.backid;
                            div1.uporder.oprice = x.oprice;
                            div1.uporder.status = x.status;
                        }
                    }
                    $("#updateModal").modal('show');
                },
                updateOrder: function () {
                    $.ajax({
                        url: '/order',
                        type: 'PUT',
                        data: JSON.stringify(div1.uporder),
                        contentType: 'application/json',
                        success: function (res) {
                            for (let x of div1.orders) {
                                if (x.id == res.id) {
                                    x.cid=div1.uporder.cid
                                    x.uid=div1.uporder.uid
                                    x.getid=div1.uporder.getid
                                    x.backid=div1.uporder.backid
                                    x.oprice=div1.uporder.oprice
                                    x.status=div1.uporder.status
                                }
                            }
                            $("#updateModal").modal('hide');
                        }
                    })
                },
                addOrder: function () {
                    $.ajax({
                        url: '/orderlist',
                        type: 'POST',
                        data: JSON.stringify(div1.aorder),
                        contentType: 'application/json',
                        success: function (data) {
                            div1.orders.push(data);
                            $("#addModal").modal('hide');
                        }
                    })
                },
                deleteOrder:function (id){
                    $.ajax({
                        url: '/order'+id,
                        type: 'DELETE',
                        success: function (data) {
                            if (data==true) {
                                for (let x of div1.orders) {
                                    if (x.id == id){
                                        div1.orders.splice(div1.orders.indexOf(x),1);
                                    }
                                }
                            }
                        }
                    })
                },
                changePage: function (flag) {
                    if (this.page < this.pages && flag == -1) {
                        this.page = this.page + 1;
                    } else if (this.page > 1 && flag == 0) {
                        this.page = this.page - 1;
                    }
                    $.ajax({
                        url: '/orderlist',
                        data: {page: div1.page},
                        type: 'get',
                        dataType: 'json',
                        success: function (data) {
                            div1.orders = data.list;
                            div1.page = data.pageNum;
                        }
                    })
                }
            }
        }
    );
    $(function () {
        $.ajax({
            url: '/orderlist',
            type: 'GET',
            success: function (data) {
                div1.orders = data.list;
                div1.pages=data.pages;
            }
        })
    })
</script>
</body>
</html>
